<template>
  <div class="footer">
    <div class="container">
      <div class="footer_top" id="link">
        <h3>友情链接:</h3>
        <a :href="value.link" v-for="(value,index) in links" :key="index+'s'" target="_blank">
          <span>{{value.name}}</span>
        </a>

        <br />
        <span class="footer_title">热门展馆：</span>
        <a
          :href="value1.link"
          v-for="(value1,index1) in Popular_pavilion"
          :key="index1+'d'"
          target="_blank"
        >
          <span>{{value1.name}}</span>
        </a>
        <br />
        <span class="footer_title">热门城市展会：</span>
        <a
          :href="value2.link"
          v-for="(value2,index2) in Popular_city_exhibition"
          :key="index2+'h'"
          target="_blank"
        >
          <span>{{value2.name}}</span>
        </a>
        <br />
        <span class="footer_title">热门主题展会：</span>
        <a
          :href="value3.link"
          v-for="(value3,index3) in Popular_theme_exhibitions"
          :key="index3+'g'"
          target="_blank"
        >
          <span>{{value3.name}}</span>
        </a>
      </div>
      <div class="footer_botom">
        <div class="footer_botom_top">
          <router-link to="#">关于我们</router-link> -
          <router-link to="#">广告服务</router-link> -
          <router-link to="#">展会合作</router-link> -
          <router-link to="#">联系我们</router-link> -
          <router-link to="#">媒体合作须知</router-link> -
          <router-link to="#">免责声明</router-link>
        </div>
        <div class="footer_bootom_text">
          <P>
            中国会贸网 版权所有 2016 粤icp备
            <a href="http://www.beian.miit.gov.cn/" target="_blank">16051394</a>号
          </P>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      links: [
        { name: "工业网", link: "http://www.baidu.com" },
        { name: "会展网", link: "" },
        { name: "展会网", link: "" },
        { name: "展易网", link: "" },
        { name: "第一展会", link: "" },
        { name: "好展会", link: "" },
        { name: "E展网", link: "" },
        { name: "中国模具网", link: "" },
        { name: "大连小区", link: "" },
        { name: "亚洲工业网", link: "" },
        { name: "东莞培训", link: "" },
        { name: "珠三角城市展会盟", link: "" },
        { name: "店铺设计", link: "" },
        { name: "世界工业网", link: "" },
        { name: "免费发布展会", link: "" },
        { name: "展览设计", link: "" }
      ],

      Popular_pavilion: [
        { name: "国家会展中心（上海）", link: "" },
        { name: "中国国际展览中心", link: "" },
        { name: "香港展馆", link: "" },
        { name: "上海世贸商城", link: "" },
        { name: "北京展馆", link: "" },
        { name: "中国进出口商品交易中心", link: "" },
        { name: "琶洲会展中心", link: "" },
        { name: "上海光大会展中心", link: "" },
        { name: "北京展馆", link: "" },
        { name: "北京展馆", link: "" }
      ],
      Popular_city_exhibition: [
        { name: "北京展会", link: "" },
        { name: "上海展会", link: "" },
        { name: "广州展会", link: "" },
        { name: "香港展会", link: "" },
        { name: "杭州展会", link: "" },
        { name: "厦门展会", link: "" },
        { name: "郑州展会", link: "" },
        { name: "青岛展会", link: "" },
        { name: "西安展会", link: "" },
        { name: "武汉展会", link: "" },
        { name: "重庆展会", link: "" },
        { name: "成都展会", link: "" },
        { name: "东莞展会", link: "" },
        { name: "重庆展会", link: "" }
      ],
      Popular_theme_exhibitions: [
        { name: "汽车展", link: "" },
        { name: "LED展", link: "" },
        { name: "玩具展", link: "" },
        { name: "五金展", link: "" },
        { name: "涂料展", link: "" },
        { name: "教育展", link: "" },
        { name: "乐器展", link: "" },
        { name: "工程机械展", link: "" },
        { name: "电子产品展", link: "" },
        { name: "摄影展", link: "" },
        { name: "食品安全展", link: "" },
        { name: "实验仪器展", link: "" },
        { name: "有机食品展", link: "" },
        { name: "酒店用品展", link: "" },
        { name: "模具展", link: "" }
      ]
    };
  }
};
</script>
<style lang="less" scoped>
.footer {
  //   box-sizing: border-box;
  //   width: 100%;
  background-color: #e5e2e3;
  //   margin-bottom: 50px;
  // display: flex;
  .container {
    width: 1200px;
    margin: 0 auto;
    background-color: #e5e2e3;
    .footer_top {
      padding: 64px 10px 0px 40px;
      text-align: justify;
      h3 {
        font-weight: bold;
        font-size: 18px;
        display: inline;
      }
      > a {
        // text-decoration: none;
        span {
          color: #82868a;
          font-size: 12px;
          margin: 5px;
          line-height: 28px;
        }
        span:hover {
          color: #c81623;
        }
      }
      .footer_title {
        margin: 20px;
      }
    }
    .footer_botom {
      border-top: 1px solid #82868a;
      margin-top: 36px;
      padding: 30px 0px 80px;
      color: #82868a;
      .footer_botom_top {
        text-align: center;
        > a {
          margin: 10px;
        }
      }
      .footer_bootom_text {
        text-align: center;
        margin-top: 30px;
      }
    }
  }
}
a {
  color: #82868a;
  text-decoration: none;
}
// 未访问
a:link {
  color: #82868a;
}
//   访问过
a:visited {
  color: #82868a;
}
a:hover {
  color: #c81623;
}
/* 正在点击的链接，鼠标在元素上按下还没有松开*/
a:active {
  color: #82868a;
}
/* 获得焦点的时候 鼠标松开时显示的颜色*/
a:focus {
  color: #82868a;
}
</style>